.container, .window, .wood {
    overflow: hidden
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

.cloudy, .moon {
    border-radius: 50%
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.container {
    width: 100%;
    height: 100%;
    position: relative
}

.bg-adaptive {
    background-size: 100% 100%
}

.effect-out {
    -webkit-animation: effectOut 8s ease-in-out forwards;
    -webkit-transform-origin: 71% 72%;
    -moz-animation: effectOut 8s ease-in-out forwards;
    -moz-transform-origin: 71% 72%
}

@-webkit-keyframes effectOut {
    0% {
        opacity: 1
    }
    100% {
        -webkit-transform: scale(20);
        opacity: 0
    }
}

@-moz-keyframes effectOut {
    0% {
        opacity: 1
    }
    100% {
        -moz-transform: scale(20);
        opacity: 0
    }
}

section.effect-in {
    z-index: 15;
    display: block;
    opacity: 0;
    -webkit-transform: scale(8);
    -webkit-animation: effectIn 5s ease-in-out forwards;
    -webkit-transform-origin: 58.5% 73.5%;
    -moz-transform: scale(8);
    -moz-animation: effectIn 5s ease-in-out forwards;
    -moz-transform-origin: 58.5% 73.5%
}

@-webkit-keyframes effectIn {
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@-moz-keyframes effectIn {
    100% {
        -moz-transform: scale(1);
        opacity: 1
    }
}

.container .page-a {
    width: 100%;
    height: 100%;
    background-image: url(http://img.mukewang.com/565d07770001790814410901.png);
    position: absolute;
    z-index: 5
}

.page-a svg, .tree {
    z-index: 15;
    position: absolute
}

.tree {
    width: 2.71rem;
    height: 4.24rem;
    bottom: 0;
    left: 1rem;
    background-image: url(http://img.mukewang.com/565d07d30001c97605420424.png);
    background-size: 200% 100%;
    -webkit-animation: treeAnim 1s steps(2) infinite;
    -moz-animation: treeAnim 1s steps(2) infinite
}

@-webkit-keyframes treeAnim {
    0% {
        background-position: 200% 100%
    }
    100% {
        background-position: 400% 100%
    }
}

@-moz-keyframes treeAnim {
    0% {
        background-position: 200% 100%
    }
    100% {
        background-position: 400% 100%
    }
}

.chs-boy {
    width: 5rem;
    height: 1.5rem;
    position: absolute;
    z-index: 3;
    top: .1rem;
    right: -3rem;
    transform: scale(.1);
    background: url(http://img.mukewang.com/565d07490001365329660269.png) -300% -100%;
    background-size: 400% 100%
}

.chs-boy-deer {
    -webkit-animation: chsBoyDeer .75s steps(3, end) infinite;
    -moz-animation: chsBoyDeer .75s steps(3, end) infinite
}

@-webkit-keyframes chsBoyDeer {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%
    }
}

@-moz-keyframes chsBoyDeer {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%
    }
}

.moon {
    background: #FCF0BC;
    width: 2rem;
    height: 2rem;
    box-shadow: 0 0 1.5rem #FCF0BC;
    position: absolute;
    left: 3.3rem;
    top: .8rem;
    -webkit-animation: nucleus 2s infinite linear;
    -moz-animation: nucleus 2s infinite linear
}

@-webkit-keyframes nucleus {
    0%, 100% {
        box-shadow: 0 0 0 transparent
    }
    50% {
        box-shadow: 0 0 1rem #FCF0BC
    }
}

@-moz-keyframes nucleus {
    0%, 100% {
        box-shadow: 0 0 0 transparent
    }
    50% {
        box-shadow: 0 0 1rem #FCF0BC
    }
}

.page-a svg {
    width: 1.2rem;
    height: 1.2rem;
    left: 1.75rem;
    top: 4.9rem
}

.cloudy {
    background: #60768D;
    border-style: none;
    box-shadow: #60768D 1.2rem -.2rem 0 -.1rem, #60768D .5rem -.5rem, #60768D .8rem .2rem, #60768D 1.5rem .2rem 0 -.2rem;
    height: 1rem;
    width: 1rem;
    position: absolute;
    left: .5rem;
    top: 1.8rem;
    z-index: 5;
    -webkit-animation: cloudy 5s ease-in-out infinite;
    -moz-animation: cloudy 5s ease-in-out infinite
}

@-webkit-keyframes cloudy {
    50% {
        -webkit-transform: translateY(-.1rem)
    }
}

@-moz-keyframes cloudy {
    50% {
        -moz-transform: translateY(-.1rem)
    }
}

.window {
    width: 2.6rem;
    height: 1.5rem;
    position: absolute;
    left: 9.7rem;
    top: 6.2rem;
    cursor: pointer;
    -webkit-perspective: 500px;
    -moz-perspective: 500px
}

.window-content {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    width: 91%;
    margin: 0 auto;
    height: 100%
}

.window-bg {
    width: 90%;
    height: 95%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
    bottom: 0;
    background: url(http://img.mukewang.com/565d07be00019da702270135.png);
    background-size: 100% 100%;
    z-index: -1
}

.window:after, .window:before {
    content: "";
    width: 100%;
    z-index: 100;
    display: block;
    position: absolute
}

.window:before {
    background: url(http://img.mukewang.com/565d07e40001088402410017.png);
    height: .17rem;
    bottom: .05rem;
    background-size: 100% 100%
}

.window:after {
    background: url(http://img.mukewang.com/565d080400018d2702270009.png);
    height: .09rem;
    bottom: 0;
    background-size: 100% 100%
}

.wood {
    display: block
}

.window-left {
    float: left;
    background: url(http://img.mukewang.com/565d081d0001cfd901140134.png);
    -webkit-border-top-left-radius: .1rem;
    -moz-border-top-left-radius: .1rem
}

.window-right {
    float: right;
    background: url(http://img.mukewang.com/565d084c0001431b01140134.png);
    -webkit-border-top-right-radius: .1rem;
    -moz-border-top-right-radius: .1rem
}

.window-left, .window-right {
    width: 50%;
    height: 1.3rem;
    z-index: 110;
    box-shadow: 0 0 .15rem #FCF0BC;
    background-size: 100% 100%
}

.window-transition {
    -webkit-transition: 2s ease-in-out;
    -moz-transition: 2s ease-in-out
}

.window-left.hover {
    -moz-transform: scale(.95) rotateY(60deg);
    -webkit-transform: scale(.95) rotateY(60deg);
    margin-top: .1rem;
    margin-left: -.25rem
}

.window-right.hover {
    -moz-transform: scale(.95) rotateY(-60deg);
    -webkit-transform: scale(.95) rotateY(-60deg);
    margin-top: .1rem;
    margin-right: -.25rem
}

.container .page-b {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(http://img.mukewang.com/565d09fa000145a614410901.png);
    z-index: 4
}

.walk-stop {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused
}

.walk-run {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running
}

.girl {
    width: 3.5rem;
    height: 4.06rem;
    position: absolute;
    z-index: 10;
    left: 1rem;
    top: 3.2rem;
    background: url(http://img.mukewang.com/565d09e50001156273510407.png);
    background-size: 2100% 100%
}

.girl-standUp {
    left: 1.2rem;
    -webkit-animation: standUp .2s steps(3, start) forwards;
    -moz-animation: standUp .2s steps(3, start) forwards
}

@-webkit-keyframes standUp {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%;
        top: 4rem
    }
}

@-moz-keyframes standUp {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%;
        top: 4rem
    }
}

.girl-throwBook {
    top: 4rem;
    left: .5rem;
    -webkit-animation: throwBook .3s steps(2, start) forwards;
    -moz-animation: throwBook .3s steps(2, start) forwards
}

@-webkit-keyframes throwBook {
    0% {
        background-position: -300% 100%
    }
    100% {
        background-position: -500% 100%
    }
}

@-moz-keyframes throwBook {
    0% {
        background-position: -300% 100%
    }
    100% {
        background-position: -500% 100%
    }
}

.girl-walk {
    left: 1rem;
    -webkit-animation: girlWalk .9s steps(4, start) infinite;
    -moz-animation: girlWalk .9s steps(4, start) infinite
}

@-webkit-keyframes girlWalk {
    0% {
        background-position: -500% 100%
    }
    100% {
        background-position: -900% 100%
    }
}

@-moz-keyframes girlWalk {
    0% {
        background-position: -500% 100%
    }
    100% {
        background-position: -900% 100%
    }
}

.girl-stand {
    top: 4rem;
    background-position: -1000% 100%
}

.girl-choose {
    -webkit-animation: girlChoose 2s steps(2, end) forwards;
    -moz-animation: girlChoose 2s steps(2, end) forwards
}

@-webkit-keyframes girlChoose {
    0% {
        background-position: -1000% 100%
    }
    100% {
        background-position: -1200% 100%
    }
}

@-moz-keyframes girlChoose {
    0% {
        background-position: -1000% 100%
    }
    100% {
        background-position: -1200% 100%
    }
}

.girl-weep {
    -webkit-animation: girlWeep 450ms steps(4, end) forwards infinite;
    -moz-animation: girlWeep 450ms steps(4, end) forwards infinite
}

@-webkit-keyframes girlWeep {
    0% {
        background-position: -1300% 100%
    }
    100% {
        background-position: -1700% 100%
    }
}

@-moz-keyframes girlWeep {
    0% {
        background-position: -1300% 100%
    }
    100% {
        background-position: -1700% 100%
    }
}

.girl-hug {
    -webkit-animation: girlHug 450ms steps(3, end) forwards;
    -moz-animation: girlHug 450ms steps(3, end) forwards
}

@-webkit-keyframes girlHug {
    0% {
        background-position: -1700% 100%
    }
    100% {
        left: 7.85rem;
        background-position: -2000% 100%
    }
}

@-moz-keyframes girlHug {
    0% {
        background-position: -1700% 100%
    }
    100% {
        left: 7.85rem;
        background-position: -2000% 100%
    }
}

.cat {
    width: 1.36rem;
    height: .88rem;
    position: absolute;
    z-index: 3;
    left: 3.5rem;
    top: 5.5rem;
    background: url(http://img.mukewang.com/565d09a80001a48801360088.png);
    background-size: 100% 100%
}

.christmas-boy, .christmas-boy-head {
    top: 4rem;
    width: 3.5rem;
    height: 4.06rem;
    position: absolute
}

.cat-book {
    background: url(http://img.mukewang.com/565d09ba0001f9aa01360089.png);
    background-size: 100% 100%
}

.christmas-boy {
    z-index: 5;
    right: -3.5rem;
    background: url(http://img.mukewang.com/565d09870001372152510407.png) 0 100%;
    background-size: 1500% 100%
}

.boy-walk {
    -webkit-animation: boyWalk .75s steps(4, end) infinite;
    -moz-animation: boyWalk .75s steps(4, end) infinite
}

@-webkit-keyframes boyWalk {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -400% 100%
    }
}

@-moz-keyframes boyWalk {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -400% 100%
    }
}

.boy-strip-1 {
    background-position: -800% 100%
}

.boy-strip-2 {
    background-position: -900% 100%
}

.boy-strip-3 {
    background-position: -1000% 100%
}

.boy-stand {
    background-position: -400% 100%
}

.boy-unwrapp {
    -webkit-animation: unwrapp 2s steps(2, end) 1 forwards;
    -moz-animation: unwrapp 2s steps(2, end) 1 forwards
}

@-webkit-keyframes unwrapp {
    0% {
        background-position: -400% 100%
    }
    100% {
        background-position: -600% 100%
    }
}

@-moz-keyframes unwrapp {
    0% {
        background-position: -400% 100%
    }
    100% {
        background-position: -600% 100%
    }
}

.boy-hug {
    -webkit-animation: boyHug 1s steps(3, end) 1 forwards;
    -moz-animation: boyHug 1s steps(3, end) 1 forwards
}

@-webkit-keyframes boyHug {
    0% {
        background-position: -1000% 100%
    }
    100% {
        background-position: -1300% 100%
    }
}

@-moz-keyframes boyHug {
    0% {
        background-position: -1000% 100%
    }
    100% {
        background-position: -1300% 100%
    }
}

.christmas-boy-head {
    left: 7.85rem;
    z-index: 12;
    background: url(http://img.mukewang.com/565d09870001372152510407.png) -1300% 100%;
    background-size: 1400% 100%;
    display: none
}

@-webkit-keyframes bounceIn {
    20%, 40%, 60%, 80%, from, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {
    20%, 40%, 60%, 80%, from, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.bounceIn {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

.page-c {
    width: 100%;
    height: 100%;
    background-image: url(http://img.mukewang.com/565d0b280001788014410901.png);
    position: absolute;
    z-index: 3
}

.treefix {
    width: 1.9rem;
    height: 3.3rem;
    bottom: 1.2rem;
    left: 1.4rem
}

.page-c svg {
    width: .6rem;
    height: .6rem;
    position: absolute;
    left: 2.05rem;
    top: 5.1rem;
    z-index: 15
}

.deer {
    width: 5rem;
    height: 1.5rem;
    position: absolute;
    z-index: 3;
    bottom: 1rem;
    right: 4rem;
    background: url(http://img.mukewang.com/565d0b1a0001d9aa29660268.png) -300% -100%;
    background-size: 400% 100%
}

.deer-animate {
    -webkit-animation: deerAnimate 750ms steps(3, end) infinite;
    -moz-animation: deerAnimate 750ms steps(3, end) infinite
}

@-webkit-keyframes deerAnimate {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%
    }
}

@-moz-keyframes deerAnimate {
    0% {
        background-position: 0 100%
    }
    100% {
        background-position: -300% 100%
    }
}

.page-c .window {
    left: 8rem
}

.window-left.close, .window-right.close {
    -webkit-animation: closeWindow 2s forwards;
    -moz-animation: closeWindow 2s forwards
}

@-webkit-keyframes closeWindow {
    100% {
        -webkit-transform: scale(1) rotateY(0) rotateZ(0);
        margin-right: 0;
        margin-left: 0
    }
}

@-moz-keyframes closeWindow {
    100% {
        -moz-transform: scale(1) rotateY(0) rotateZ(0);
        margin-right: 0;
        margin-left: 0
    }
}

.window-close-bg, .window-scene-bg {
    position: absolute;
    left: 50%;
    bottom: .1rem;
    -webkit-transform: translateZ(-50px);
    -moz-transform: translateZ(-50px)
}

.window-scene-bg {
    background: url(http://img.mukewang.com/565d0b4c0001816b02270135.png);
    background-size: 100% 100%;
    width: 2.26rem;
    height: 1.2rem;
    z-index: -1;
    margin-left: -1.13rem
}

.window-close-bg {
    background: url(http://img.mukewang.com/565d0b3d00016a4600810081.png);
    background-size: 100% 100%;
    width: .8rem;
    height: .8rem;
    margin-left: -.4rem;
    opacity: 0;
    z-index: 500
}